<template>
	<view>
		<!-- 新闻详情 -->
		<!-- 内容 -->
		<view class="lfy_goods_box">
			<div class="goods topic">
				<p class="goods_introduce">{{public.newsTitle}}</p>
				<p class="time">时间：{{public.riqi}}</p>
				<p class="news_con">{{public.newsContent}}</p>
				<div class="topic_img_box">
					<img :src="public.newsImg" alt="" />
				</div>
				<div class="topic_seller_info">

					<span>
						<i class="el-icon-thumb"></i>
						{{public.thumb}}
					</span>
					<span>
						<i class="el-icon-view"></i>
						{{public.see}}
					</span>
					<span>
						<i class="el-icon-chat-dot-round"></i>
						{{public.evaluate}}
					</span>
				</div>
			</div>
		</view>
		<!--  -->
		<view class="lfy_goods_box ">
			<!-- title -->
			<p class="public_title">
				<span></span>
				全部评论
			</p>
			<div class="goods">
				<view class="leave_message_box" v-for="item in mess" :key="item.id">
					<view class="leave_message">
						<span class="message_left">
							<img class="message_head_portrait" :src="item.headPortrait" alt="">
							<p class="message_name">{{item.messName}}</p>
						</span>
						<view>
							<u-icon @click='dian(item)' size="20" name="thumb-up-fill"></u-icon>
							<span
								style='font-size: 13upx; margin-left:44upx;margin-top: -34upx;display: block;'>{{item.dian}}</span>
						</view>
					</view>
					<p class="message_con">{{item.messContent}}</p>
					<span class="message_time">1分钟前</span>
				</view>
			</div>
		</view>
		<!-- 其他新闻 -->
		<p class="other">-其他新闻-</p>
		<!--  -->
		<view class="container_mar">
			<view class="lfy_goods_box">
				<div class="goods news">
					<view class="news_img_box">
						<img :src="public.newsImg" alt="">
						<p class="date">{{public.riqi}}</p>
					</view>
					<view class="news_info">
						<p class="news_title">{{public.newsTitle}}</p>
						<p class="news_con">{{public.newsContent}}</p>
						<p class="info_icon">
							<span>
								<i class="el-icon-thumb"></i>
								{{public.thumb}}
							</span>
							<span>
								<i class="el-icon-view"></i>
								{{public.see}}
							</span>
							<span>
								<i class="el-icon-chat-dot-round"></i>
								{{public.evaluate}}
							</span>
						</p>
					</view>
				</div>
			</view>
			<view class="lfy_goods_box">
				<div class="goods news">
					<view class="news_img_box">
						<img :src="public.newsImg" alt="">
						<p class="date">{{public.riqi}}</p>
					</view>
					<view class="news_info">
						<p class="news_title">{{public.newsTitle}}</p>
						<p class="news_con">{{public.newsContent}}</p>
						<p class="info_icon">
							<span>
								<i class="el-icon-thumb"></i>
								{{public.thumb}}
							</span>
							<span>
								<i class="el-icon-view"></i>
								{{public.see}}
							</span>
							<span>
								<i class="el-icon-chat-dot-round"></i>
								{{public.evaluate}}
							</span>
						</p>
					</view>
				</div>
			</view>
		</view>


		<!-- fixed -->
		<view class="fixed">
			<view class="operation_left">
				<span v-if="iszan1" @click='zan()'>
					<u-icon size="22" name="thumb-up-fill"></u-icon>点赞
				</span>
				<span v-if="iszan" @click='zan()'>
					<u-icon color="#28d2d1" size="22" name="thumb-up-fill"></u-icon>已赞
				</span>

				<u--input class="input_issue" placeholder="输入您要发布的评论" border="surround" v-model="value"
					@change="change"></u--input>
				<u-button @click="addNewsMess" class="want_btn" type="primary" text="发布评论"></u-button>
			</view>
		</view>
		<!--  -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				public: {},
				mess: [],
				value: '',
				// 点赞
				iszan1: true,
				iszan: false,
			}
		},
		onLoad(option) {
			this.$api.searchNews({
					id: option.id
				}).then(res => {
					this.public = res.data
					console.log(this.public)

				}),
				// 全部评论
				this.$api.lfynewsmess().then(res => {
					this.mess = res.data
				})
		},
		methods: {
			// 评论点赞
			dian(item) {
				console.log(Number(item.dian) + 1)
				console.log(item.state)
				if (item.state == 0) {
					this.$api.upPMessage({
						id: item.id,
						dian: Number(item.dian) + 1,
						state: 1
					}).then((res) => {

						console.log(res)
						this.$api.lfynewsmess().then(res => {
							this.mess = res.data
						})
					})
				} else {
					this.$api.upPMessage({
						id: item.id,
						dian: Number(item.dian) - 1,
						state: 0
					}).then((res) => {
						console.log(res)
						this.$api.lfynewsmess().then(res => {
							this.mess = res.data
						})
					})
				}

			},
			// 点赞
			zan() {
				this.iszan = !this.iszan
				this.iszan1 = !this.iszan

			},
			change(e) {
				console.log('change', e);
			},
			// 发布评论
			addNewsMess() {
				var obj = {
					headPortrait: 'http://127.0.0.1:7001/public/lfyimg/head_portrait_01.png',
					messName: '滚滚长江东逝水',
					messContent: this.value,
					dian: '0',
					state: '0'
				}
				this.$api.addMessage(obj).then((res) => {
					this.$api.lfynewsmess().then(res => {
						this.mess = res.data
					})

				})
			},

		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

.container_mar{
	padding-bottom: 200upx;
}
	// 内容
	.lfy_goods_box {
		padding: 40upx 40upx 0;

	}

	.goods {
		padding: 30upx;
		background-color: #fff;
		box-shadow: 0upx 10upx 40upx #edeaef;
		border-radius: 20upx;
	}

	.time {
		color: #999;
		font-size: 20upx;
		height: 40upx;
		line-height: 40upx;
	}

	.news_con {
		color: #666;
		margin: 20upx 0;
	}

	.topic_head_portrait {
		height: 100%;
	}

	.topic_img_box {
		// margin-top: 20upx;
	}

	.topic_img_box img {
		width: 100%;
	}

	.topic .goods_introduce {
		color: #333;
		height: 50upx;
		line-height: 50upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 32upx;

	}

	.topic_seller_info {
		display: flex;
		justify-content: space-around;
		border-top: 2upx solid #dddddd;
		padding-top: 20upx;
		margin-top: 30upx;
	}

	.topic_seller_info span {
		color: #999;
		font-size: 22upx;
	}

	.topic_seller_info span i {
		margin-right: 10upx;
	}

	// 
	.info_flex {
		display: flex;
		justify-content: space-between;
		height: 60upx;
	}

	.seller_head_portrait {
		height: 100%;
	}

	.seller_name {
		color: #666;
		font-size: 25upx;
	}

	.fans_box {
		color: #999;
		font-size: 18upx;
		margin-left: 20upx;
		float: right;
	}

	.fans_box .fans {
		margin-right: 20upx;
	}

	.follow_btn {
		width: 18%;
		color: #333;
		background-color: #28d2d1;
		border: none;
		border-radius: 20upx;
		height: 100%;
	}

	// 全部评论
	.leave_message {
		display: flex;
		justify-content: space-between;
		height: 60upx;
		padding: 20upx 0 0 30upx;
	}

	.message_name {
		color: #666;
		font-size: 25upx;
		float: right;
		line-height: 60upx;
		margin-left: 20upx;
	}

	.message_head_portrait {
		height: 100%;
	}

	.message_con {
		color: #999;
		font-size: 25upx;
		padding-left: 110upx;
	}

	.message_time {
		color: #999;
		font-size: 20upx;
		padding-left: 110upx;
	}

	// title
	.public_title {
		color: #333;
		font-size: 32upx;
		padding: 0 30upx;
		height: 40upx;
		margin: 20upx 0;
	}

	.public_title span {
		display: inline-block;
		width: 10upx;
		height: 100%;
		background-color: #28d2d1;
		border-radius: 10upx;
		float: left;
	}

	// 其他话题
	.other {
		color: #999;
		height: 60upx;
		line-height: 60upx;
		padding: 30upx 30upx 0;
		text-align: center;

	}

	// 
	.news {
		display: flex;
		justify-content: space-between;
	}

	.news_img_box {
		width: 50%;
	}

	.news_img_box img {
		width: 100%;
		height: 100%;
	}

	.date {
		font-size: 20upx;
		color: #999;
		line-height: 0.5;
	}

	.news_info {
		width: 45%;
	}

	.news_title {
		color: #666;
		font-size: 30upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.news_con {
		color: #999;
		font-size: 22upx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		margin: 20upx 0;
	}

	.info_icon {
		color: #999;
		font-size: 14px;
		text-align: right;
	}

	.info_icon span {
		// margin-left: 20upx;
		text-align: right;
	}

	.info_icon span i {
		margin-right: 10upx;
	}


	// fixed
	.fixed {
		width: 100%;
		padding: 30upx;
		position: fixed;
		bottom: 0;
		z-index: 1;
		background-color: #fff;
		box-sizing: border-box;
	}


	.operation_left {
		display: flex;
		justify-content: space-between;
	}

	.operation_left span {
		width: 8%;
		color: #999;
		font-size: 20upx;
	}

	.input_issue {
		width: 40%;
	}

	.want_btn {
		width: 20%;
		color: #fff;
		background-color: #28d2d1;
		border: none;
		border-radius: 30upx;
	}
</style>
